<template>
    <!-- 租户 -->
    <entity-manager
        :fields="fields"
        :queryFields="queryFields"
        apiPrefix="/sys/tenant"
        :tree="false"
        ref="entityManagerRef"
        :params="params"
        :withEdit="false"
        :withNew="false"
        :withDelete="false"
        operationsWidth="140px"
    >
        <template #buttons>
            <el-button type="primary" icon="Plus" @click="newTenant">新增</el-button>
        </template>
        <template #prefixButtons="{ row }">
            <el-link type="primary" icon="Memo" @click="showDetail(row)">详情</el-link>
        </template>
    </entity-manager>
    <full-panel v-model="detailVisible" title="租户详情" :key="currentRow.id">
        <detail :tenant="currentRow" @change="change" />
    </full-panel>

    <el-drawer v-model="newVisible" title="新增租户" size="600px">
        <base-form :fields="newFields" v-model="newForm" labelPosition="top" ref="formRef" />
        <template #footer>
            <el-button @click="newVisible = false">取消</el-button>
            <el-button type="primary" @click="doAddTenant">确定</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import detail from "./detail.vue";
import FullPanel from "@/components/full-panel.vue";

const fields = [
    { label: "租户名称", prop: "name" },
    { label: "租户管理员", prop: "admin.nickname" },
    {
        label: "租户类型",
        prop: "type",
        converter: (val) => (val == "company" ? "公司" : "个人"),
    },
    { label: "状态", prop: "status", converter: (val) => (val == "valid" ? "有效" : "无效") },
    { label: "证件号码", prop: "idCard" },
    { label: "联系人", prop: "contactName" },
    { label: "联系电话", prop: "contactPhone" },
    { label: "地址", prop: "address" },
    { label: "添加时间", prop: "createTime", width: "160px" },
];
const queryFields = [
    { label: "名称", prop: "nameLike" },
    { label: "证件号码", prop: "idCard" },
];
const newFields = [
    { label: "租户名称", prop: "name", required: true, unique: true },
    {
        label: "租户类型",
        prop: "type",
        type: "radioGroup",
        default: "company",
        options: [
            { label: "企业", value: "company" },
            { label: "个人", value: "personal" },
        ],
    },
    { label: "组织机构代码", prop: "idCard", required: true, display: (form) => form.type == "company" },
    { label: "管理员", prop: "admin.nickname", required: true, display: (form) => form.type == "company", change: (val, form) => (form.contactName = val) },
    {
        label: "管理员手机号",
        prop: "admin.phone",
        required: true,
        display: (form) => form.type == "company",
        change: (val, form) => (form.contactPhone = val),
        validation: {
            type: "phone",
        },
    },
    {
        label: "手机号",
        prop: "admin.phone",
        required: true,
        display: (form) => form.type == "personal",
        validation: {
            type: "phone",
        },
    },
    { label: "身份证", prop: "idCard", required: false, display: (form) => form.type == "personal" },
    { label: "联系人姓名", prop: "contactName" },
    { label: "联系人电话", prop: "contactPhone" },
    { label: "地址", prop: "address", type: "textarea", rows: 5 },
];
const entityManagerRef = ref();
const params = ref({});
const detailVisible = ref(false);
const currentRow = ref({});
const newVisible = ref(false);
const newForm = ref({});
const formRef = ref();

function reload() {
    entityManagerRef.value.reload();
}

function newTenant() {
    newVisible.value = true;
}

function showDetail(row) {
    currentRow.value = row;
    detailVisible.value = true;
}

function doAddTenant() {
    formRef.value.validate((res) => {
        if (!res) {
            return;
        }

        app.https.post("/sys/tenant/add", newForm.value).then(() => {
            app.success("操作成功");
            newVisible.value = false;
            reload();
        });
    });
}

function change(val) {
    currentRow.value = val;
    reload();
}
</script>
